<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig. 10.1</title>
</head>
<body>
    <canvas id="circuitCanvas" width="700" height="400" style="border:1px solid #d3d3d3;"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // General style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';

        // Helper function to draw a filled circle (connection dot)
        function drawDot(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 4, 0, 2 * Math.PI);
            ctx.fill();
        }

        // --- Define coordinates for layout ---
        const y1 = 150;
        const y2 = 250;
        const yMid = (y1 + y2) / 2;

        const inputSectionX = {
            text: 50,
            symbol: 110,
            terminals: 130
        };

        const rectifierBox = {
            left: 200,
            right: 450,
            top: 100,
            bottom: 300,
            midX: (200 + 450) / 2,
            midY: (100 + 300) / 2
        };

        const outputSectionX = {
            resistor: 520,
            resistorWidth: 25,
            text: 555
        };
        
        const figY = 360;
        const figX = canvas.width / 2;

        // --- Draw Input Section ---
        
        // Text "input"
        ctx.font = '22px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('input', inputSectionX.text, yMid);

        // AC source symbol (~)
        ctx.beginPath();
        ctx.moveTo(inputSectionX.symbol - 15, yMid);
        ctx.quadraticCurveTo(inputSectionX.symbol - 5, yMid - 20, inputSectionX.symbol, yMid);
        ctx.quadraticCurveTo(inputSectionX.symbol + 5, yMid + 20, inputSectionX.symbol + 15, yMid);
        ctx.stroke();

        // Input terminals (open circles)
        ctx.beginPath();
        ctx.arc(inputSectionX.terminals, y1, 5, 0, 2 * Math.PI);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.arc(inputSectionX.terminals, y2, 5, 0, 2 * Math.PI);
        ctx.stroke();

        // Wires from input terminals to rectifier
        ctx.beginPath();
        ctx.moveTo(inputSectionX.terminals, y1);
        ctx.lineTo(rectifierBox.left, y1);
        ctx.moveTo(inputSectionX.terminals, y2);
        ctx.lineTo(rectifierBox.left, y2);
        ctx.stroke();

        // --- Draw Bridge Rectifier Section ---

        // Dashed box
        ctx.save();
        ctx.setLineDash([10, 8]);
        ctx.strokeRect(rectifierBox.left, rectifierBox.top, rectifierBox.right - rectifierBox.left, rectifierBox.bottom - rectifierBox.top);
        ctx.restore();

        // Connection dots on the box
        drawDot(rectifierBox.left, y1);
        drawDot(rectifierBox.left, y2);
        drawDot(rectifierBox.right, y1);
        drawDot(rectifierBox.right, y2);

        // Text "bridge rectifier"
        ctx.font = '26px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('bridge', rectifierBox.midX, rectifierBox.midY - 15);
        ctx.fillText('rectifier', rectifierBox.midX, rectifierBox.midY + 15);

        // --- Draw Output Section ---

        // Wires from rectifier to resistor
        ctx.beginPath();
        ctx.moveTo(rectifierBox.right, y1);
        ctx.lineTo(outputSectionX.resistor, y1);
        ctx.moveTo(rectifierBox.right, y2);
        ctx.lineTo(outputSectionX.resistor, y2);
        ctx.stroke();

        // Output resistor (rectangle)
        ctx.strokeRect(outputSectionX.resistor, y1, outputSectionX.resistorWidth, y2 - y1);
        
        // Text "output resistor R"
        ctx.font = '22px sans-serif';
        ctx.textAlign = 'left';
        ctx.fillText('output', outputSectionX.text, yMid - 12);
        ctx.fillText('resistor R', outputSectionX.text, yMid + 12);
        
        // --- Draw Figure Label ---
        ctx.font = 'bold 24px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 10.1', figX, figY);

    </script>
</body>
</html>